<!DOCTYPE html>
<html>
<head>
	<title>添加新地址</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/user.css">
	<script src="js/area_sichuan.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
	<style type="text/css">[v-cloak]{display: none;}.icon_right{width:.4rem;position: relative;top:.1rem;height:.4rem;right:.1rem;}</style>
</head>
<body class="address_add body_bg">
<div id="app" v-cloak>
	<ul class="address_box pad_usual">
		<li class="item">
			<label>姓名</label>
			<input type="text" placeholder="填写收货人姓名" v-model="user">
		</li>
		<li class="item">
			<label>联系电话</label>
			<input type="text" placeholder="填写手机号" v-model="mobile">
		</li>
		<!--<li class="item">
			<label>验证码</label>
			<input type="text" placeholder="填写验证码">
		</li>-->
		<li class="item">
			<label>所在地区</label>
			<div class="select_box" @click="address_modal=true">
				<input type="text" placeholder="选择所在地区" v-model="address" readonly>
				<img src="img/arr_right.png" class="icon_right" alt="">
			</div>
			<!--<input type="text" v-model="address">-->
			<!--<div class="select_box">
				<select name="" id="">
					<option value="">选择所在地区</option>
				</select>
			</div>-->
		</li>
		<li class="item">
			<label>详细地址</label>
			<input type="text" placeholder="填写详细地址" v-model="detail">
		</li>
	</ul>
	<div class="pad_usual set_address">
		设为默认地址 <img :src="addressIf?'img/switch_open.png':'img/switch_close.png'" @click="defaultBtn" class="icon_switch" alt="">
	</div>
	<div class="mt_2rem btn_box" @click="saveBtn">
		<div class="btn">保存</div>
		<div class="btn remove">删除</div>
	</div>
	<van-popup v-model="address_modal" position="bottom" :overlay="true">
		<van-area :area-list="areaList" value="510100" @confirm="onChangeadd" @cancel="address_modal = false" />
	</van-popup>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/public.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>

<script type="text/javascript">
var app = new Vue({
	el:"#app",
	data:{
        addressIf:false,
		user:"罗西",
		mobile:"18483232321",
		address:"四川省 成都市 成华区",
        detail:"四川省成都市成华区某某路56号某某小区",
        address_modal:false,
        areaList:Address,
	},
	methods:{
        defaultBtn:function () {
			this.addressIf = !this.addressIf;
        },
        saveBtn:function () {
			location.href="address.html"
        },
		 onChangeadd:function (data) {
			 console.log("onChangeadd",data);
			 this.address=data[0].name+" "+data[1].name+" "+data[2].name;
			 this.address_modal=false;
		 },
	},
	created:function(){
	    if(GetRequest().type==1){
	        this.mobile="";this.user="";this.address="";this.detail="";
		}
	},
	mounted:function(){}
})	

</script>
</body>
</html>